<template>
  <div class="searchHint">
    <van-cell v-for="(item, index) in list" :key="index" icon="search">
      <p slot="title" v-html="emphasis(item)" @click="$emit('search',item)"></p>
    </van-cell>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { getSearchAssociate } from '@/api/homepage/nav.js'
export default {
  data () {
    return {
      list: []
    }
  },
  props: ['vlaues'],
  mounted () {},
  methods: {
    emphasis (originalData) {
      const reg = new RegExp(this.vlaues, 'gi')
      return originalData.replace(
        reg,
        `<span style="color:red">${this.vlaues}</span>`
      )
    }
  },
  watch: {
    vlaues: {
      handler: debounce(async function () {
        if (this.vlaues === '') return (this.list = [])
        // 发送请求
        const {
          data: {
            data: { options: res }
          }
        } = await getSearchAssociate(this.vlaues)
        this.list = res
      }, 250),
      immediate: true // watch立即执行不会跳过第一个值
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
